<template>
  <view class="login-container">
    <view class="logo">
      <view class="logo-circle">
        <text class="logo-text">SOCIAL</text>
      </view>
    </view>
    <text class="title">社交媒体分析平台</text>
    
    <view class="form">
      <input 
        class="input" 
        v-model="username" 
        placeholder="请输入用户名" 
        placeholder-class="placeholder"
      />
      <input 
        class="input" 
        v-model="password" 
        placeholder="请输入密码" 
        password 
        placeholder-class="placeholder"
      />
      
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import store from '@/store/index.js'

const username = ref('admin')
const password = ref('123456')

const handleLogin = async () => {
  if (!username.value || !password.value) {
    uni.showToast({ title: '请输入用户名和密码', icon: 'none' })
    return
  }
  
  uni.showLoading({ title: '登录中...', mask: true })
  
  try {
    const success = await store.dispatch('login', {
      username: username.value,
      password: password.value
    })
    
    if (success) {
      // 保存用户信息到本地存储
      uni.setStorageSync('user', JSON.stringify(store.state.user))
      
      // 获取统计数据
      await store.dispatch('fetchStats')
      await store.dispatch('fetchRecommendations')
      
      uni.showToast({ title: '登录成功', icon: 'success' })
      
      // 跳转到首页
      uni.switchTab({ 
        url: '/pages/index/index',
        success: () => console.log('跳转成功'),
        fail: (err) => console.error('跳转失败:', err)
      })
    } else {
      uni.showToast({ title: '用户名或密码错误', icon: 'none' })
    }
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({ title: '登录失败，请重试', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  height: 100vh;
}

.logo {
  margin-top: 40px;
}

.logo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #6a11cb;
}

.title {
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0 40px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.form {
  width: 100%;
  max-width: 400px;
}

.input {
  background: rgba(255, 255, 255, 0.9);
  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  margin-bottom: 20px;
  font-size: 16px;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.placeholder {
  color: #999;
}

.login-btn {
  background: #ff2d55;
  color: white;
  height: 50px;
  border-radius: 25px;
  font-size: 18px;
  margin-top: 10px;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 45, 85, 0.4);
  transition: all 0.3s;
}

.login-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.4);
}
</style>